<template>
  <view class="cu-modal  bottom-modal" :class="{show:visible}">
    <view class="mask" @click="handleMaskClick"></view>
    <view class="cu-dialog bg-white">
      <view class="cu-bar justify-end">
        <view class="content">{{title}}</view>
        <view class="action" @click="close()">
          <text class="cuIcon-close"></text>
        </view>
      </view>
      <scroll-view scroll-y class="slot">
        <slot></slot>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "action-sheet",
  data() {
    return {
      visible: false
    }
  },
  props: {
    title: {
      type: String,
      default: ""
    },
  },
  methods: {
    handleMaskClick(){
      this.close();
    },
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  },
}
</script>

<style scoped lang='scss'>
.mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.slot{
  height: 40vh;
}
</style>